import React, { useEffect, useState } from 'react';

import { ConnectProps, history } from 'umi';
import { Helmet } from 'react-helmet';
import { SearchBar,NavBar, List,Drawer, Toast } from 'antd-mobile';
import { Icon} from '@/components'
import My from '@/pages/my'
import { indexStatics,getExamRecord } from '@/services/edu'
import { storage,LOCALSTATE } from '@/utils';
import { toChinesNum } from '@/utils/utils'
import Cookies from 'js-cookie'
import  styles from './index.less';

interface IProps extends ConnectProps {
  loading?: boolean;
  currentUser: APP.ICurrentUser;
}

const HomePage: React.FC<IProps> = () => {
  const [data,setData] = useState<any>({})
  const [open,setopen] = useState<boolean>(false)
  const local = storage.get(LOCALSTATE,true)
  
  useEffect(() => {
    fetchStatics()
  }, []);
  const fetchStatics =async()=>{

   
    if(local.currentSubjectId){
      const res = await indexStatics({subjectId:local.currentSubjectId})
      if(res?.code ===1){
        setData(res.response)
      }
    }else{
      Toast.fail('请先选择一门课程')
      setopen(true)
    }
    
  }
  
  const handleExam =()=>{
    history.push(`/exam?id=${local.currentSubjectId}`)
  }
  const handleContinue = ()=>{
    if(data.prevAnswerVM?.recordId){
      history.push(`/answer?id=${data.prevAnswerVM?.recordId}`)
    }
    
  }

  return (
    <>
    {/* <NavigationBar
        leftContent={<Icon onClick={()=>setopen(true)} type="icon-mine"/>}
        title={data.title||'考试培训'}
      /> */}
      <NavBar icon={<Icon type="icon-mine"/>} onLeftClick={() =>setopen(!open)}>
        {data.title||'建筑师训练'}
      </NavBar>
    
      
      
        
        <Drawer
          className="my-drawer"
          style={{ minHeight: document.documentElement.clientHeight }}
          // enableDragHandle
          contentStyle={{ color: '#A6A6A6', textAlign: 'center' }}
          sidebar={<div><My cb={fetchStatics} {...local}/></div>}
          open={open}
          onOpenChange={()=>setopen(!open)}
        >
          <main className={styles.home}>
        <Helmet>
          <title>{data.title||'建筑师训练'}</title>
        </Helmet>
        <div className={styles.notice}>一共{data.totalCount||'-'}题，做过{data.doneCount||'-'}题，做过{data.donePerCount||'-'}题次，正确率{data.accuracy||'-'}%</div>
        <SearchBar onFocus={()=>history.push('/search')} placeholder="快速搜索题目" />
        {/* <WhiteSpace size="lg" /> */}
        <div className={styles.row}>
          <div className={styles.rowItem} onClick={handleContinue}>
            <h2>接着做题</h2>
            <div className={styles.result} style={{justifyContent:'center'}}>
              <div>
                <p>{data.prevAnswerVM?.recordType===1?'随机做题':'顺序做题'}</p>
                <p>{data.prevAnswerVM?.recordOrder}/{data.prevAnswerVM?.recordSum}</p>
              </div>
            </div>
          </div>
          <div className={styles.rowItem} onClick={handleExam}>
            <h2>模拟测试</h2>
            <div className={styles.result}>
              <div>
                <p>最高分</p>
                <p>{data.examBestScore||'-'}</p>
              </div>
              <div>
                <p>共做</p>
                <p>{data.examDoneNum||'-'}次</p>
              </div>
              <div>
                <p>平均分</p>
                <p>{data.examAvgScore||'-'}%</p>
              </div>
            </div>
          </div>
        </div>
        <List renderHeader={()=>(<div className={styles.topRow}><div onClick={()=>history.push(`/history/error?subjectId=${local.currentSubjectId}`)}>错题库</div><div onClick={()=>history.push('/history/index')}>测试记录</div></div>)}>
          {
            (data.chapterList||[]).map((item,index)=><List.Item key={index} onClick={()=>history.push(`/chapter?id=${item.id}`)} arrow="horizontal">第{toChinesNum(index+1)}章 {item.name}  ({item.sectionCount||'-'}节)（{item.questionCount||'-'}题） </List.Item>)
          }
          
          
        </List>
        </main>
        </Drawer>

    
    </>
    
      
  );
};



HomePage.defaultProps = {
  loading: false,
};

export default HomePage;


